import React, { Component } from 'react'
import { Form, FormItem } from './index'
import Input from './../input/input'
import Button from './../button/button'

export default class FormDemo extends Component {
  constructor (props) {
    super(props)
    this.state = {
      formData: {
        name: '',
        age: '',
        height: ''
      }
    }
    this.validateForm = this.validateForm.bind(this)
    this.resetValidateForm = this.resetValidateForm.bind(this)
  }
  onChange (key, value) {
    this.setState({
      formData: Object.assign(this.state.formData, {
        [key]: value
      })
    })
  }
  validateForm () {
    this.refs.form.validate().then(() => {
      alert('提交')
    })
  }
  resetValidateForm () {
    this.refs.form.resetValidate()
  }
  render () {
    return (
      <div style={{ width: '400px' }}>
        <Form formData={this.state.formData} ref="form">
          <FormItem label="名称" rules="required" prop="name">
            <Input value={this.state.formData.name} onChange={this.onChange.bind(this, 'name')}></Input>
          </FormItem>
          <FormItem label="年龄" rules="required" prop="age">
            <Input value={this.state.formData.age} onChange={this.onChange.bind(this, 'age')}></Input>
          </FormItem>
          <FormItem label="身高" prop="height">
            <Input value={this.state.formData.height} onChange={this.onChange.bind(this, 'height')}></Input>
          </FormItem>
        </Form>
        <Button type="primary" onClick={this.validateForm}>提交</Button>
        <Button type="primary" onClick={this.resetValidateForm}>重置</Button>
      </div>
    )
  }
}